<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-22 14:33
 * Desc: 券详情
 */
-->
<template>
  <yy-page class="rights-code">
    <view class="rights-code__content">
      <zm-box>
        <detail-list :title="info.couponName" :list="isGoods ? listGoods : list" :info="info"></detail-list>
        <detail-list :list="list2" :info="info" v-if="info.isUnUse === '1'">
          <view slot="title" class="fs28 mt30 mb20 fc3 b">以下情况不可使用</view>
        </detail-list>
        <view v-if="fromPage === 'history' || info.isFrozen === '1'" class="rights-code__coupon-status" :class="'rights-code__' + statusName"></view>
      </zm-box>
      <view class="mt20 mb100">
        <zm-box>
          <view class="fs30 fc3 mb25 b">使用须知</view>
          <p class="fc8" v-for="(item, index) in info.useExplain" :key="index">{{ item }}</p>
        </zm-box>
      </view>
      <view v-if="info.isFrozen !== '1' && !fromPage" class="rights-code__btn--use" @click="toUse">去使用</view>
    </view>
  </yy-page>
</template>
<script>
  import ZmBox from '@/subPages/commons/ZmBox'
  import DetailList from './detailList/index.vue'
  export default {
    components: { ZmBox, DetailList },
    name: 'rights-code-detail',
    data() {
      return {
        listGoods: [
          {
            prop: 'couponCode',
            label: '券编号'
          },
          {
            prop: 'couponId',
            label: '券密码'
          },
          {
            prop: 'expire',
            label: '有效期'
          },
          {
            prop: 'commodityCouponApplyToMallTypeName',
            label: '适用类型'
          },
          {
            prop: 'moneyOffConfigName',
            label: '立减金额'
          },
          {
            prop: 'commodityCouponLimitTypeName',
            label: '指定套票'
          }
        ],
        list: [
          // {
          //   prop: 'couponCode',
          //   label: '券编号'
          // },
          // {
          //   prop: 'couponId',
          //   label: '券密码'
          // },
          {
            prop: 'expire',
            label: '有效期'
          },
          {
            prop: 'film',
            label: '可用影片'
          },
          {
            prop: 'screeningType',
            label: '可用场次'
          },
          {
            prop: 'hallType',
            label: '可用影厅'
          },
          {
            prop: 'copyType',
            label: '可用制式'
          },
          {
            prop: 'diffRule',
            label: '补差说明'
          },
          {
            prop: 'cinema',
            label: '可用影院'
          }
        ],
        list2: [
          {
            prop: 'unUseScreeningType',
            label: '不可用场次'
          },
          {
            prop: 'unUseHallType',
            label: '不可用影厅'
          },
          {
            prop: 'unUseCopyType',
            label: '不可用制式'
          },
          {
            prop: 'unUseCinema',
            label: '不可用影院'
          }
        ],
        info: {},
        isGoods: false,
        status: '',
        fromPage: '' // 进入页面
      }
    },
    onLoad(options) {
      this.isGoods = options.isGoods
      this.status = options.status
      this.fromPage = options.isFromSureOrder || ''
      this.getCouponInfo(options.couponId)
    },
    onUnload() {
      console.log('this.clickUse', this.clickUse)
      const pages = getCurrentPages()
      const page = pages[pages.length - 1]
      console.log('++++handleUnlockSeat+++++setIsReload', pages)
      console.log('++++handleUnlockSeat+++++setIsReload', page)
    },
    methods: {
      getCouponInfo(id) {
        uni.$api.coupon.getCouponInfo({ couponId: id }).then((res) => {
          this.info = res
          if (this.isGoods && this.info.commodityCouponLimitType === '2') {
            this.listGoods.push({ prop: 'commodityIdName', label: '  ' })
          }
        })
      },
      toUse() {
        if (this.isGoods) {
          this.$tools.navigateTo('/pages/mall/mall', {}, 'switchTab')
        } else {
          this.$tools.navigateTo('/pages/ticket/ticket', {}, 'switchTab')
        }
      }
    },
    computed: {
      statusName() {
        return this.status ? this.status : 'freeze'
      }
    }
  }
</script>
<style lang="scss" scoped>
  .rights-code {
    &__content {
      padding: 20upx;
    }
    &__btn--use {
      width: 710upx;
      height: 100upx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 20upx;
      line-height: 100upx;
      text-align: center;
      font-size: 36upx;
      color: #ffffff;
    }

    &__coupon-status {
      position: absolute;
      top: 50upx;
      right: 50upx;
      width: 96upx;
      height: 96upx;
    }
    &__used {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-used.png) no-repeat;
      background-size: 100%;
    }
    &__invalid {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-invalid.png) no-repeat;
      background-size: 100%;
    }
    &__overdue {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-overdue.png) no-repeat;
      background-size: 100%;
    }
    &__verification {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-verification.png) no-repeat;
      background-size: 100%;
    }
    &__freeze {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-freeze.png) no-repeat;
      background-size: 100%;
    }
  }
</style>
